import React from "react";
import { Link } from "react-router-dom";
import PageTitle from '../../components/page-title'
import { Button } from 'antd'
import { SnippetsOutlined, DeleteOutlined, CloudUploadOutlined } from '@ant-design/icons';
import Demo from '../../components/cheackBoxPagination'
import ajax from '../../uil/ajax'
import MyUpload from '../../components/MyUpload'
class InputHome extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            select: [],
            header: [
                {
                    title: '用例Id',
                    dataIndex: 'id'
                },
                {
                    title: '故障方式',
                    dataIndex: 'p1',
                    render: text => <span>{text}</span>,
                },
                {
                    title: '模块名',
                    dataIndex: 'p2',
                    render: text => <div>{text}</div>,
                },
                {
                    title: '角色',
                    dataIndex: 'p3',
                    render: text => <span>{text}</span>,
                },
                {
                    title: '故障',
                    dataIndex: 'p4',
                    render: text => <span>{text}</span>,
                },
                {
                    title: '故障参数',
                    dataIndex: 'p5',
                    render: text => <span>{text}</span>,
                },
                {
                    title: '验证任务',
                    dataIndex: 'p6',
                    render: text => <div style={{ whiteSpace: 'pre' }} >{text}</div>
                },
                {
                    title: '前置任务',
                    dataIndex: 'p7',
                    render: text => <div>{text}</div>,
                },
                {
                    title: '后置任务',
                    dataIndex: 'p8',
                    render: text => <span>{text}</span>,
                },
            ],
            data: [
                {
                    key: '1',
                    id: '100',
                    p1: '1-单点',
                    p2: 'mtforont',
                    p3: '1-主',
                    p4: '1-kill',
                    p5: '_',
                    p6: ['3-故障节点进程状态\n', '4-数据一致性\n', '5-RTO/PRO计算\n', '6-订单速率\n', '7-席位连接数\n', '8-日志验证\n'],
                    p7: ['1-起系统\n', '2-切状态\n', '3-下单'],
                    p8: ['1-停止下单\n', '2-停系统']

                },
                {
                    key: '2',
                    id: '99',
                    p1: '2-双点',
                    p2: 'mtforont \nfibproxy',
                    p3: '1-主',
                    p4: '1-kill \n2-挂起 \n3-下单',
                    p5: '_',
                    p6: ['3-故障节点进程状态\n', '4-数据一致性\n', '5-RTO/PRO计算\n', '6-订单速率\n', '7-席位连接数\n', '8-日志验证\n'],
                    p7: ['1-起系统\n', '2-切状态\n', '3-下单'],
                    p8: ['1-停止下单\n', '2-停系统']

                },

            ]
        }
    }

    componentDidMount() {
        console.log('我是生命最初的梦想')
        ajax('/api/input/inputHome').then(res => {
            console.log(res.data)

        })
    }

    deleteWhat(e) {
        console.log(e)
        this.setState({
            select: e
        })
    }

    delete() {
        //数组合并去重
        let arr1 = this.state.data
        let arr2 = this.state.select
        arr1 = arr1.filter(item => {
            let idList = arr2.map(v => v.key)
            return !idList.includes(item.key)

        })
        this.setState({
            data: arr1
        })
        alert("还有验证和请求没有写,记得记得记得")
    }

    inst() {
        alert('还不知道怎么写')
    }
    render() {
        return (
            <div id="page-wrapper">
                <PageTitle title="用例录入" />

                <Button type="primary" icon={<SnippetsOutlined />}>
                    <Link to='/cases-error' style={{ color: '#FFFFFF' }}>新建环境</Link>
                </Button>

                <Button style={{ marginLeft: "10px",marginRight:'10px' }}
                    type="ghost" danger={true}
                    onClick={() => this.delete()}
                    icon={<DeleteOutlined />}>
                    删除
                </Button>
{/* 
                <Button style={{ marginLeft: "10px" }}
                    type="ghost"
                    onClick={() => this.inst()}
                    icon={<CloudUploadOutlined />}>
                    导入
                </Button> */}
                <MyUpload style={{ marginLeft: "10px" }} ></MyUpload>

                <Demo columns={this.state.header}
                    dataSource={this.state.data}
                    delete={e => this.deleteWhat(e)}
                />
            </div>
        )
    }
}



export default InputHome